<template>
	<view class="content" v-if="isShow">
		<view class="wrap">
			<!-- <u-swiper :list="data.images" border-radius="0" mode="number" indicator-pos="bottomRight" height="750"></u-swiper> -->
            
            <swiper class="swiper" :autoplay="false" interval="3000" indicator-dots="true" circular="true" indicator-color="rgba(238, 238, 238, 1)" indicator-active-color="#FFFFFF"  @change="change">
                <swiper-item v-for="(image, index) in data.images" :key="index">
                    <view class="swiper-item">
                        <image :src="image.image"></image>
                    </view>
                </swiper-item>
                <swiper-item v-if="data.video">
                    <view class="swiper-item">
                        <video id="myVideo" v-if="data.video" :src="data.video" :autoplay="autoplay" controls
                            play-btn-position="center" style="width: 750rpx;height: 750rpx;"></video>
                    </view>
                </swiper-item>
            </swiper>
            
            <view class="city" @click="$gTo(`/mine/pages/city/city`)">
                {{data.city}}
                <u-icon name="arrow-down-fill" color="#000" size="22" class="u-m-l-10"></u-icon>
            </view>
		</view>
        
		<view class="box">
            <view class="u-flex">
                <view class="single">
                    单次服务
                    <text class="single-price">
                        ￥<text class="single-num">{{data.price}}</text>/次
                    </text>
                </view>
                <view class="cycle" v-if="sId != 4">
                    周期服务
                    <text>
                        ￥<text class="cycle-num">{{data.prices}}</text>/次
                    </text>
                </view>
            </view>
            <view class="goods-name">{{data.describes}}</view>
            <view class="coupon" v-if="sId == 1 && sType != 4">
                <view class="coupon-tit">优惠</view>
                <view class="u-flex" v-if="data.coupon && data.coupon.length > 0">
                    <image :src="IMAGEURL + 'static/image/coupon.png'" class="coupon-icon"></image>
                    <view class="coupon-list">
                        <view v-for="(item, index) in data.coupon" :key="index" v-if="index < 2">
                            {{item.coupon}}
                        </view>
                    </view>
                </view>
                <view class="coupon-btn" @click="show_01 = true">
                    立即领取
                    <u-icon name="arrow-right" color="#512c19" size="22" class="u-m-l-5"></u-icon>
                </view>
            </view>
        </view>
        
		<!-- 宝贝详情 -->
		<view class="baby u-flex u-row-center">
			<view class="l1"></view>
			<view class="baby_name">宝贝详情</view>
			<view class="l1"></view>
		</view>
		<!-- 详情图 -->
		<view class="goods-image">
		    <u-parse :html="data.details"></u-parse>
		</view>
		<!-- 底部 is_sale=1上架 0下架 -->
        <view class="footer-box">
            <view class="foot-box u-flex u-row-between">
            	<view class="u-flex u-m-l-10">
                    <!-- 美洽 $gTo(`/mine/pages/meiqia/meiqia`) -->
            		<view class="u-flex-1" @click="QRshow = true">
                        <image :src="IMAGEURL + 'static/icon/icon_15.png'" class="f-img"></image>
            			<view class="foot-tit">客服</view>
            		</view>
            	</view>
                <!-- sId： 1伙伴计划(包括热门服务、公司宣传) 2伙伴定制服务 3伙伴+ 4家庭教育课堂。
                    sType： 1伙伴计划 2热门服务1 3热门服务2 4公司宣传 -->
                <view class="u-flex u-row-right u-flex-1">
                    <!-- 伙伴计时、热门服务1、热门服务2 -->
                    <view class="y-btn" v-if="sId == 1 && (sType == 1 || sType == 2 || sType == 3)" @click="buy">立即预约</view>
                    <!-- 家庭教育课堂 -->
                    <view class="y-btn" v-if="sId == 4 && sType == 1" @click="$noMultipleClicks(toPay)">立即报名</view>
                    <!-- 公司宣传 -->
                    <view class="y-btn" v-if="sId == 1 && sType == 4" @click="buy">立即支付</view>
                    <!-- 伙伴定制服务、伙伴+ -->
                    <template v-if="(sId == 2 || sId == 3) && sType == 1">
                        <view class="zx-btn" @click="KFshow = true">立即咨询</view>
                        <view class="zf-btn" @click="$noMultipleClicks(toPay)">立即支付</view>
                    </template>
                </view>
            </view>
            <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
        </view>
        
        <!-- 选择服务弹窗 -->
        <u-popup v-model="show" :round="true" mode="bottom" :closeable="true" width="750rpx" height="600px" border-radius="14">
            <view>
                <view class="pop-title">选择服务</view>
                <!-- sId,//服务id 1伙伴计划(包括热门服务、公司宣传) 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                sType,//伙伴计划类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                iId,//服务项目id 一级规格
                itId,//服务项目id 二级规格
                puId,//公司宣传id -->
                <view class="pop-box">
                    <view class="nav" v-if="sId == 1 && sType == 1">
                        <scroll-view scroll-x>
                            <view class="nav-i">
                                <view class="nav-i2" :class="{navActive : cateId == item.id}" 
                                    v-for="(item, index) in serviceItems.items" :key="index" @click="chooseCate(item)">
                                    <image :src="item.image" class="nav-img"></image>
                                    <view class="nav-text">{{item.name}}</view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="u-flex u-p-b-30" v-if="(sId == 1 && sType == 2) || (sId == 1 && sType == 3) || (sId == 1 && sType == 4)">
                        <image :src="serviceItems.items[0].image" class="nav-img"></image>
                        <view class="u-font-36 u-p-l-15">{{ serviceItems.items[0].name }}</view>
                        <view class="c-cate" v-if="sId == 1 && sType == 3">
                            | {{ serviceItems.items[0].items[0].name }}
                        </view>
                    </view>
                    
                    <view class="nav-c" v-if="(sId == 1 && sType == 1) || (sId == 1 && sType == 2) || (sId == 1 && sType == 4)">
                        <view class="nav-c-i" :class="{navCActive : cateChildId == item.id}" 
                            v-for="(item, index) in serviceChild" :key="index" @click="chooseCateChild(item)">
                            {{item.name}}
                            <image :src="IMAGEURL + 'static/icon/choose_03.png'" class="choose-03" v-if="cateChildId == item.id"></image>
                        </view>
                    </view>
                </view>
                <view class="pop-line"></view>
                <view class="pop-box u-p-b-30">
                    <view class="pop-nav">
                        <view class="pop-nav-i" :class="{active : type == 1}" @click="chooseNav(1)">单次服务</view>
                        <view class="pop-nav-i" :class="{active : type == 2}" @click="chooseNav(2)">周期服务</view>
                    </view>
                    <view class="nav">
                        <scroll-view scroll-x>
                            <view class="nav-i">
                                <view class="nav-day" v-if="type == 1" :class="{activeDay : weekDay == item.day && !item.before}" 
                                    v-for="(item, index) in serviceItems.week" :key="index" @click="chooseDay(item, index)">
                                    <view>{{item.week}}</view>
                                    <view class="day" :class="{activeDay : weekDay == item.day && !item.before, deactiveDay : item.before}">
                                        {{item.day}}
                                    </view>
                                    <view class="spot" v-if="weekDay == item.day && !item.before"></view>
                                </view>
                                
                                <view class="nav-day" v-if="type == 2" :class="{activeDay : weekId == item.week_id}"
                                    v-for="(item, index) in serviceItemsWeek" :key="index" @click="chooseDay(item, index)">
                                    <view>{{item.week}}</view>
                                    <view class="spot" v-if="weekId == item.week_id"></view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view>开始时间选择</view>
                    <view class="u-flex time">
                        <view class="t-box" @click="open(1)">
                            <input type="text" v-model="startTime" placeholder="请选择时间" disabled />
                        </view>
                        <view class="line"></view>
                        <view class="t-box" @click="open(2)">
                            <input type="text" v-model="endTime" placeholder="请选择时间" disabled />
                        </view>
                        <view class="search" v-if="type == 2" @click="confirm">确定</view>
                    </view>
                    <!-- <scroll-view :scroll-y="true" style="height: 300rpx;"> -->
                        <view class="zhouqi" v-if="type == 2 && weekList.length > 0">
                            <view class="zq-i" v-for="(item, index) in weekList" :key="index">
                                <view>{{item.week}}</view>
                                <view>{{item.time}}</view>
                                <view class="zq-i-close" @click="delTime(index)">
                                    <u-icon name="close-circle-fill" color="#9e9e9e" size="38"></u-icon>
                                </view>
                            </view>
                        </view>
                    <!-- </scroll-view> -->
                    <view class="u-p-t-10" v-if="type == 2">需要服务周数</view>
                    <view class="zs-box" v-if="type == 2">
                        <input type="number" v-model="weekNum" placeholder="请输入" class="zs-inp">
                        周
                    </view>
                    <view class="pop-btn" @click="$noMultipleClicks(doBuy)">立即预约</view>
                </view>
            </view>
        </u-popup>
        
        <!-- 优惠券 -->
        <u-popup v-model="show_01" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
            <view class="pop-box-cou">
                <view class="pop-title">领取优惠券</view>
                <view>
                    <view class="u-p-t-25 u-p-b-20">免费领</view>
                    <scroll-view :scroll-y="true" style="height: 800rpx;">
                        <view>
                            <view class="item" v-for="(item, index) in list" :key="index">
                                <image :src="IMAGEURL + 'static/image/cou_bg.png'" class="cou-bg"></image>
                                <view class="item-cou">
                                    <view class="item-cou-l">
                                        <view>
                                            <text class="cou-num">{{item.money}}</text>
                                            <text>元</text>
                                        </view>
                                        <view>满{{item.full_money}}可用</view>
                                    </view>
                                    <view class="item-cou-r">
                                        <view class="u-flex-1">
                                            <view class="u-font-30 u-p-b-5 text-bold">{{item.name}}</view>
                                            <view class="cou-time">有效期至{{item.end_time}}</view>
                                            <view class="cou-time">本券剩余{{item.num}}张</view>
                                        </view>
                                        <view class="cou-btn" @click="doReceive(item)">立即领取</view>
                                    </view>
                                </view>
                            </view>
                            
                            <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </u-popup>
        
        <!-- 选择时间 -->
        <!-- <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker> -->
        <!-- <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker> -->
        <template v-if="KStimeShow">
            <u-select v-model="KStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(1, $event)"></u-select>
        </template>
        <template v-if="JStimeShow">
            <u-select v-model="JStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(2, $event)"></u-select>
        </template>
        
        <!-- 客服中心-立即咨询 -->
        <u-mask :show="KFshow" mode="center" border-radius="15">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-up">
                        <view>客服中心</view>
                        <image :src="IMAGEURL + 'static/image/img_09.png'"></image>
                    </view>
                    <view class="pop-call">
                        <view>
                            <view class="school">咨询热线</view>
                            <view class="u-font-34 text-bold">{{ data.telephone }}</view>
                        </view>
                        <image :src="IMAGEURL + 'static/image/img_tel.png'" @click="$call(data.telephone)"></image>
                    </view>
                    <image @click="KFshow = false" class="pop-del" :src="IMAGEURL + 'static/icon/close_02.png'"></image>
                </view>
            </view>
        </u-mask>
        
        <!-- 企业微信二维码 -->
        <u-mask :show="QRshow" mode="center" border-radius="15">
            <view class="popup">
                <view class="win-box2">
                    <view class="u-p-40">
                        <image src="../../static/icon/tab.png" class="qr-img" @click.stop="previewImage"></image>
                        <view class="gzh-text">长按识别二维码添加企业微信</view>
                    </view>
                    <image @click="QRshow = false" class="pop-del" :src="IMAGEURL + 'static/icon/close_02.png'"></image>
                </view>
            </view>
        </u-mask>
	</view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
    const day = currentDate.getDate();
    // const DATE = `${year}-${month}-${day}`
    const DATE = `${year}/${month}/${day}`
    
	export default {
		data() {
			return {
                IMAGEURL,
                noClick:true,//连点
				background: { backgroundColor: 'transparent' },
                data: {},
                isShow: false,
                list: [],//弹窗的优惠券列表
                show_01: false,//优惠券弹窗
                show: false, //选择服务弹窗
                KFshow: false,//客服弹窗
                QRshow: false,//二维码弹窗
                service: {},//客服
                type: 1,//1单次 2周期
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                timeParams: { //时间格式
                	year: false,
                	month: false,
                	day: false,
                	hour: true,
                	minute: true,
                	second: false
                },
                videoplay: '',
                autoplay: false,
                sId: 1, //服务id
                sType: 1,//服务类型
                iId: '',//服务项目id 一级规格
                itId: '',//服务项目id 二级规格
                puId: '',//公司宣传id
                serviceItems: {},
                serviceChild: [],//二级分类
                cateId: '',//一级分类id
                cateChildId: '',//二级分类id
                weekId: '',//选择日期id
                weekDay: '',//选择日期
                weekIndex: '',
                weekList: [],//选择的周期服务时间
                weekNum: '',//服务周数
                // timeList: [
                //     [{value: 0,label: '0时'},{value: 1,label: '1时'},{value: 2,label: '2时'},{value: 3,label: '3时'},{value: 4,label: '4时'},{value: 5,label: '5时'},{value: 6,label: '6时'},{value: 7,label: '7时'},{value: 8,label: '8时'},{value: 9,label: '9时'},{value: 10,label: '10时'},{value: 11,label: '11时'},{value: 12,label: '12时'},{value: 13,label: '13时'},{value: 14,label: '14时'},{value: 15,label: '15时'},{value: 16,label: '16时'},{value: 17,label: '17时'},{value: 18,label: '18时'},{value: 19,label: '19时'},{value: 20,label: '20时'},{value: 21,label: '21时'},{value: 22,label: '22时'},{value: 23,label: '23时'}],
                //     [{value: '00',label: '00分'},{value: 10,label: '10分'},{value: 20,label: '20分'},{value: 30,label: '30分'},{value: 40,label: '40分'},{value: 50,label: '50分'}] ],
                timeList: [
                    [{value: 6,label: '6时'},{value: 7,label: '7时'},{value: 8,label: '8时'},{value: 9,label: '9时'},{value: 10,label: '10时'},{value: 11,label: '11时'},{value: 12,label: '12时'},{value: 13,label: '13时'},{value: 14,label: '14时'},{value: 15,label: '15时'},{value: 16,label: '16时'},{value: 17,label: '17时'},{value: 18,label: '18时'},{value: 19,label: '19时'},{value: 20,label: '20时'}],
                    [{value: '00',label: '00分'},{value: 10,label: '10分'},{value: 20,label: '20分'},{value: 30,label: '30分'},{value: 40,label: '40分'},{value: 50,label: '50分'}] ],
                time1: 0,
                time2: 0,
                isNull: false,
                serviceItemsWeek: [{week: "周一", week_id: 1},{week: "周二", week_id: 2},{week: "周三", week_id: 3},{week: "周四", week_id: 4},{week: "周五", week_id: 5},{week: "周六", week_id: 6},{week: "周日", week_id: 7}],
                
			}
		},
        onLoad(option) {
            if(option.sId) {
                this.sId = option.sId
            }
            if(option.sType) {
                this.sType = option.sType
            }
            if(option.iId) {
                this.iId = option.iId
            }
            if(option.itId) {
                this.itId = option.itId
            }
            if(option.puId) {
                this.puId = option.puId
            }
            
            // this.getService()
            this.getCouponList()
            
            
        },
        onShow() {
            if (this.$getSync('userToken')) {
                // this.getInfo()
            }
            this.getData()
            this.getServiceItems()
        },
        onReady() {
        	this.videoplay = uni.createVideoContext('myVideo')
            // this.videoplay.play()
        },
		methods: {
            // 长按关注公众号
            previewImage(e){
            	uni.previewImage({
            		// 需要预览的图片链接列表。若无需预览，可以注释urls
            		urls: [e.target.src],
            		// 为当前显示图片的链接/索引值
            		current: e.target.src,
            		// 图片指示器样式	
            		indicator:'default',
            		// 是否可循环预览
            		loop:false,
            		// 长按图片显示操作菜单，如不填默认为保存相册
            		// longPressActions:{
            		// 	itemList:[this.l('发送给朋友'),this.l]
            		// },
            		success: res => {
            			console.log('previewImage res', res);
            		}, 
            		fail: err => {
            			console.log('previewImage err', err);
            		}
            	});
            },
            
            // 选择一级分类
            chooseCate(item) {
                if (this.cateId == item.id) return
                this.cateId = item.id
                this.serviceChild = item.items
                this.cateChildId = ''
                if (item.items && item.items[0] && item.items[0].id) {
                    this.cateChildId = item.items[0].id
                }
            },
            
            // 选择二级分类
            chooseCateChild(item) {
                if (this.cateChildId == item.id) return
                this.cateChildId = item.id
            },
            
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.startTime = ''
                this.endTime = ''
                this.weekDay = ''
                this.weekId = ''
                this.weekIndex = ''
            },
            
            // 选择日期
            chooseDay(item, index) {
                if (this.type == 1) {
                    if (item.before) {
                        this.$toast('不能选择过去的日期')
                        return
                    } else {
                        if (this.weekDay == item.day) return
                        this.weekDay = item.day
                        this.weekId = item.week_id
                        this.weekIndex = index
                    }
                } else if (this.type == 2){
                    this.weekDay = item.week
                    this.weekId = item.week_id
                }
            },
            
            open(num) {
                if (!this.weekId) {
                    this.$toast('请先选择日期')
                    return
                }
                if (num == 1) {
                    this.KStimeShow = true
                }
                if (num == 2) {
                    this.JStimeShow = true
                }
            },
            //选择时间
            chooseTime(num, e) {
                console.log(e,DATE)
                var a = ''
                if (this.type == 1) {
                    a = this.serviceItems.week[this.weekIndex].date.replace(/-/g,  "/")
                } else if (this.type == 2) {
                    a = DATE
                }
                console.log(a)
                this.isNull = false
                if (num == 1) {
                    let sn = a + " " + (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value + ":" + "00"
                    this.time1 = new Date(sn).getTime()
                    this.startTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value
                }
                if (num == 2) {
                    let en = a + " " + (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value + ":" + "00"
                    this.time2 = new Date(en).getTime()
                    this.endTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value
                }
                if (this.startTime && this.endTime) {
                    if (this.startTime > this.endTime) {
                        this.isNull = true
                        this.$toast('结束时间不能小于开始时间')
                        return
                    }
                    console.log(dvalue,this.time2,this.time1)
                    let dvalue = this.time2 - this.time1 //毫秒
                    let duration = 3600000 * 2
                    if (dvalue < duration) {
                        this.isNull = true
                        this.$toast('服务时间至少2小时！')
                        return
                    }
                    let num = dvalue % duration
                    if (num !== 0) {
                        this.isNull = true
                        this.$toast('服务时间要为整数')
                        return
                    }
                }
            },
            
            // 确定选择时间
            confirm() {
                if (this.isNull) {
                    this.$toast('服务时间至少2小时并且是整数')
                    return
                }
                if (!this.weekDay) {
                    this.$toast('请选择日期')
                    return
                }
                if (!this.startTime) {
                    this.$toast('请选择开始时间')
                    return
                }
                if (!this.endTime) {
                    this.$toast('请选择结束时间')
                    return
                }
                // let a = this.serviceItems.week[this.weekIndex].date
                let b = this.startTime + '-' + this.endTime
                // let c = this.serviceItems.week[this.weekIndex].week
                // let d = this.serviceItems.week[this.weekIndex].week_id
                let list = []
                
                list.push({week_id: this.weekId, week: this.weekDay, date: '', start_time: this.startTime, end_time: this.endTime, time: b})
                
                if (this.weekList && this.weekList.length <= 0) {
                    console.log('1111111')
                    this.weekList = list
                } else {
                    console.log('2222222')
                    this.weekList.forEach((cur, index) => {
                        list.forEach((el, eli) => {
                            if (cur.week == el.week && cur.time == el.time) {
                                this.$toast('时间不能重复选择')
                                list.splice(eli, 1)
                            }
                        })
                    })
                    // console.log(this.floorList)
                    // console.log(list)
                    this.weekList = [...this.weekList, ...list]
                }
                this.startTime = ''
                this.endTime = ''
            },
            
            // 删除时间
            delTime(index) {
                this.weekList.splice(index, 1)
            },
            
            //立即预约
            doBuy() {
                let data = [], num = ''
                if (this.type == 1) {
                    if (this.isNull) {
                        this.$toast('服务时间至少2小时并且是整数')
                        return
                    }
                    if (!this.weekDay) {
                        this.$toast('请选择日期')
                        return
                    }
                    if (!this.startTime) {
                        this.$toast('请选择开始时间')
                        return
                    }
                    if (!this.endTime) {
                        this.$toast('请选择结束时间')
                        return
                    }
                    
                    let a = this.serviceItems.week[this.weekIndex].date
                    let c = this.serviceItems.week[this.weekIndex].week
                    let d = this.serviceItems.week[this.weekIndex].week_id
                    data.push({"week_id":d,"week":c,"date":a,"start_time":this.startTime,"end_time":this.endTime})
                }
                if (this.type == 2) {
                    if (this.weekList && this.weekList.length <= 0) {
                        this.$toast('请选择周期服务时间')
                        return
                    }
                    if (!this.weekNum) {
                        this.$toast('请输入服务周数')
                        return
                    }
                    num = this.weekNum
                    this.weekList.forEach(cur => {
                        data.push({"week_id":cur.week_id,"week":cur.week,"date":cur.date,"start_time":cur.start_time,"end_time":cur.end_time})
                    })
                }
                
            	this.$ajax('order_settlement', {
            		user_token: this.$getSync('userToken'),
                    service_type: this.sType,//伙伴计划类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传	
                    items2_id: this.cateChildId,//服务项目id 二级规格
                    type: this.type,//1单次服务 2周期服务
                    cycle: num,//周期 几周
                    publicize_id: this.puId,//公司宣传id
                    user_id: '',//服务人员id
                    data: data,//数组 "data":[{"week_id":"1","week":"周一","date":"2023-12-11","start_time":"10:00","end_time":"11:00"}]
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.show = false
                        this.weekDay = ''
                        this.weekId = ''
                        this.weekIndex = ''
                        this.startTime = ''
                        this.endTime = ''
                        this.weekList = []
                        this.weekNum = ''
                        const newData = JSON.stringify(ret.detail)
                        this.$gTo(`/mine/pages/settlement/settlement?data=${encodeURIComponent(newData)}&sId=${this.sId}&sType=${this.sType}&itId=${this.cateChildId}&puId=${this.puId}`)
            		} else {
            			this.$toast(ret.msg)
            		}
            	})
            },
            
            //立即购买
            buy() {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else {
                    this.show = true;
                }
            },
            
            toPay() {
                this.$ajax('submit_order', {
                    user_token: this.$getSync('userToken'),
                    service_id: this.sId,//服务类型 1伙伴计划 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                    service_type: this.sType,//服务类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                }).then(ret => { 		
                    if (ret.success == 1000) {
                        const newData = JSON.stringify(ret.detail)
                        this.$gTo(`/mine/pages/pay/pay?data=${encodeURIComponent(newData)}`)
                    } else {
                    	this.$toast(ret.msg);
                    }
                })
            },
            
            //切换到图片时，视频停止播放
            change(e) {
                this.videoplay = uni.createVideoContext('myVideo')
            	this.videoplay.stop()
            },
            
            //获取商品详情
            getData() {
            	this.$ajax('service_detail', {
            		user_token: this.$getSync('userToken'),
                    service_id: this.sId,//服务id 1伙伴计划(包括热门服务、公司宣传) 2伙伴定制服务 3伙伴+ 4家庭教育课堂
                    service_type: this.sType,//伙伴计划类型 1伙伴计划 2热门服务1 3热门服务2 4公司宣传
                    items_id: this.iId,//服务项目id 一级规格
                    items2_id: this.itId,//服务项目id 二级规格
                    publicize_id: this.puId,//公司宣传id
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail;
            			this.isShow = true;
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            doReceive(item) {
                this.$ajax('receive_coupon', {
                	user_token: this.$getSync('userToken'),
                    id: item.id,
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('领取成功');
                        this.getCouponList()
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 获取优惠券列表
            getCouponList() {
            	this.$ajax('user_coupon', {
            		user_token: this.$getSync('userToken'),
                    status: 0,//0未领取 1未使用 2已使用 3已过期
                    money: '',//订单金额 满足使用条件
                    page: 1,
                    limit: 999,
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.list = ret.detail.coupon
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 获取个人信息
            getInfo() {
            	this.$ajax('user_detail', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        uni.setStorageSync('MOBILE', ret.detail.mobile);
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getServiceItems() {
            	this.$ajax('service_items', {
            		user_token: this.$getSync('userToken'),
                    items_id: this.iId,//服务一级规格id
                    items2_id: this.itId,//服务二级规格id
                    publicize_id: this.puId,//公司宣传id
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.serviceItems = ret.detail
                        if (this.serviceItems&&this.serviceItems.items&&this.serviceItems.items[0]) {
                            this.serviceChild = this.serviceItems.items[0].items
                            this.cateId = this.serviceItems.items[0].id
                            this.cateChildId = this.serviceItems.items[0].items[0].id
                        }
                        this.serviceItems.week.forEach(cur => {
                            this.$set(cur, 'day', cur.date.split('-')[2])
                            // 同月、过去的日期
                            if (cur.date.split('-')[1] == month && cur.day < day) {
                                this.$set(cur, 'before', true)
                            }
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            // 获取客服电话
            getService() {
            	this.$ajax('service_center', {
            		
            	}).then(ret => {
            		this.service = ret.detail
            	});
            },
		},
        // onShareAppMessage(res) {
        // 	return {
        //         title: this.data.goods_name,
        //         imageUrl: this.data.image_uri,
        //         path: '/pages/goods/goods-details?id=' + this.id
        // 	}
        // },
        // onShareTimeline(){
        //     let _this = this
        //     return {
        //     	title: this.data.goods_name,
        //     	imageUrl: this.data.image_uri,
        //     	path: '/pages/goods/goods-details?id=' + this.id
        //     }
        // },
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
    .swiper {
        height: 750upx;
        width: 750upx;
    }
    /* 默认指示点的样式 */
    .swiper .wx-swiper-dot {
        width: 15rpx;
        height: 15rpx;
        background: white;
        border-radius: 15rpx;
    }
    
    /* 选中指示点的样式 */
    .swiper .wx-swiper-dot.wx-swiper-dot-active {
        width: 30rpx;
        height: 15rpx;
        background: white;
        border-radius: 15rpx;
    }
    
    .swiper-item {
        height: 100%;
        width: 100%;
    }
    .swiper-item image {
        width: 750rpx;
        height: 750rpx;
    }
    
    
    
    .pop-box-cou{
        padding: 0 20rpx;
        background-color: #f5f5f5;
    }
    .item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 706rpx;
        height: 165rpx;
    }
    .item-cou{
        width: 670rpx;
        height: 165rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 20rpx;
        top: 0;
    }
    .item-cou-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 50rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cou-time{
        font-size: 24rpx;
        color: #636363;
    }
    .cou-btn{
        font-size: 25rpx;
        color: #fff;
        padding: 15rpx 20rpx;
        background-color: #f29700;
        border-radius: 50rpx;
    }
    
    
    
    .pop-box{
        padding: 0 20rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx 20rpx 0;
    }
    .nav{
        width: 100%;
        white-space: nowrap;
        padding: 30rpx 0;
    }
    .nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-i2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 130rpx;
        height: 170rpx;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 8rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
    }
    
    .nav-day{
        // width: 92rpx;
        width: calc(650rpx / 7);
        height: 122rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 20rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #a4a4a4;
        position: relative;
    }
    .day{
        font-size: 32rpx;
        color: #000;
    }
    .activeDay{
        color: #fff;
        background-color: #f29700;
    }
    .deactiveDay{
        color: #a4a4a4;
    }
    .spot{
        position: absolute;
        bottom: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 9rpx;
        height: 9rpx;
        background-color: #fff;
        border-radius: 50%;
        margin-top: 30rpx;
    }
    
    .nav-img{
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
    }
    .nav-text{
        font-size: 24rpx;
        text-align: center;
        width: 114rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 13rpx;
    }
    .c-cate{
        font-size: 32rpx;
        color: #606370;
        padding-left: 10rpx;
    }
    .navActive{
        border: 2rpx solid #f29700;
    }
    .nav-c{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 30rpx 0 15rpx;
        border-top: 2rpx solid #eee;
    }
    .nav-c-i{
        font-size: 24rpx;
        padding: 25rpx 50rpx;
        background-color: #f8f9fb;
        border-radius: 10rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
        box-sizing: border-box;
        position: relative;
    }
    .navCActive{
        border: 2rpx solid #f29700;
    }
    .choose-03{
        width: 30rpx;
        height: 26rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .pop-line{
        width: 750rpx;
        height: 15rpx;
        background-color: #f5f5f5;
    }
    .pop-nav{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pop-nav-i{
        padding: 25rpx 35rpx 15rpx;
        font-size: 30rpx;
        font-weight: bold;
    }
    .active{
        font-size: 36rpx;
        position: relative;
    }
    .active::after{
        display: block;
        content: '';
        width: 42rpx;
        height: 9rpx;
        border-radius: 20rpx;
        background-color: #f29700;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .time {
        width: 100%;
        background-color: #f3f3f3;
        border-radius: 10rpx;
        padding: 10rpx;
        margin: 10rpx 0;
        
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 28rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
            text-align: center;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #f29700;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #fff;
            line-height: 68rpx;
            background-color: #f29700;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }
    .zhouqi{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .zq-i{
        width: calc(670rpx / 3);
        font-size: 26rpx;
        color: #3981f4;
        background-color: #f2f7ff;
        border: 2rpx solid #d4e3fd;
        border-radius: 15rpx;
        padding: 10rpx 0 10rpx 15rpx;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: flex-start;
        margin-right: 15rpx;
        margin-bottom: 20rpx;
        position: relative;
    }
    .zq-i:nth-child(3n) {
        margin-right: 0;
    }
    .zq-i-close{
        display: block;
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        z-index: 1;
    }
    .zs-box{
        width: 330rpx;
        height: 76rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fb;
        border-radius: 15rpx;
        padding: 0 20rpx;
        margin: 15rpx 0 30rpx;
    }
    .zs-inp{
        width: 100%;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
        margin-top: 25rpx;
        margin-bottom: 30rpx;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .footer-box {
        width: 100vw;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
    }
    .foot-box {
    	padding: 15rpx 30rpx;
    }
    
    // 商品详情
    .goods-image {
        width: 100%;
        margin-bottom: 200rpx;
    }
    
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 20px;

		.wrap {
			width: 100%;
            position: relative;
            
            .city{
                font-size: 30rpx;
                color: #000;
                padding: 12rpx 25rpx;
                border: 2rpx solid #fff;
                background: rgba(255,255,255,.3);
                border-radius: 0 40rpx 40rpx 0;
                position: absolute;
                left: -3rpx;
                top: 20rpx;
            }
		}


		.baby {
			width: 100%;
			background-color: #f5f5f5;

			.l1 {
				width: 87rpx;
				height: 2rpx;
				background-color: #e5e5e5;

			}

			.baby_name {
				font-size: 24rpx;
				color: #5c5c5c;
				padding: 25rpx 20rpx;
			}
		}
	}
    
    .box{
        background-color: #fff;
        padding: 50rpx 20rpx 0;
    }
    .single{
        padding-right: 25rpx;
        font-size: 24rpx;
    }
    .single-price{
        font-size: 32rpx;
        color: #f62a2a;
    }
    .single-num{
        font-size: 52rpx;
        // font-weight: bold;
    }
    .cycle{
        padding: 10rpx 25rpx;
        background: linear-gradient(to right,#fe2d5c,#fe0913);
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #fff;
    }
    .cycle-num{ 
        font-size: 40rpx;
    }
    .goods-name{
        font-size: 32rpx;
        font-weight: bold;
        padding: 30rpx 0;
    }
    .coupon{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-top: 2rpx solid #eee;
    }
    .coupon-tit{
        font-size: 26rpx;
        color: #7d7d7d;
        padding-right: 10rpx;
    }
    .coupon-icon{
        width: 97rpx;
        height: 36rpx;
    }
    .coupon-list{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
    }
    .coupon-list>view{
        height: 36rpx;
        font-size: 22rpx;
        color: #ff4a4a;
        line-height: 35rpx;
        padding: 0 15rpx;
        border: 2rpx solid #ffc7c7;
        box-sizing: border-box;
        margin-right: 10rpx;
        border-radius: 8rpx;
    }
    .coupon-list>view:first-child{
        margin-left: -5rpx;
    }
    .coupon-btn{
        font-size: 24rpx;
        color: #512c19;
    }

	.f-img {
		display: block;
		width: 37rpx;
		height: 39rpx;
		margin: 0 auto 10rpx;
	}

	.foot-tit {
		font-size: 22rpx;
		line-height: 24rpx;
		color: #696969;
		text-align: center;
	}
    
    .y-btn{
        padding: 20rpx 240rpx;
        font-size: 28rpx;
        color: #fff;
        text-align: center;
        border-radius: 15rpx;
        background: #f29700;
    }
    .zx-btn{
        padding: 20rpx 90rpx;
        font-size: 28rpx;
        color: #fff;
        text-align: center;
        border-radius: 15rpx;
        background: #1d2129;
        margin-right: 20rpx;
    }
    .zf-btn{
        padding: 20rpx 90rpx;
        font-size: 28rpx;
        color: #fff;
        text-align: center;
        border-radius: 15rpx;
        background: #f29700;
    }

    
    
    // 客服弹窗
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .qr-img{
        width: 370rpx;
        height: 370rpx;
        margin: auto;
    }
    .gzh-text{
        font-size: 26rpx;
        color: #616161;
        text-align: center;
        padding-top: 10rpx;
    }
    .pop-up {
        width: 77vw;
        height: 166upx;
        background: #f29700;
        color: #fff;
        border-top-left-radius: 10upx;
        border-top-right-radius: 10upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-left: 55upx;
        padding-right: 24upx;
        position: relative;
    }
    .school{
        font-size: 22rpx;
        padding-top: 5rpx;
    }
    .pop-up > view {
        font-size: 40upx;
        color: #ffffff;
    }
    .pop-up > image {
        font-size: 40upx;
        color: #ffffff;
        width: 290upx;
        height: 207upx;
        position: absolute;
        bottom: 0;
        right: 24upx;
    }
    .pop-call {
        width: 66vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 30upx 0;
        margin: 0 auto;
        font-weight: bold;
    
        image {
            width: 155rpx;
            height: 56rpx;
        }
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }
    
    
    
    
    
    
</style>
